<template>
  <div>
    <!--  8.7 根据点击的不同的功能切换不同的标题 -->
    <el-dialog
      :title="info.type === 'add' ? '新增秒杀活动' : '编辑秒杀活动'"
      :visible.sync="info.isshow"
      width="50%"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>

        <!-- 活动时间 -->
        <el-form-item label="活动时间">
          <template>
            <div class="block">
              <el-date-picker
                v-model="value"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                @change="timeChange"
                value-format="timestamp"
                format="yyyy 年 MM 月 dd 日 hh 时 mm 分 ss 秒"
              >
              </el-date-picker>
            </div>
          </template>
        </el-form-item>

        <!-- 一级分类 -->
        <el-form-item label="一级分类" prop="first_cateid">
          <el-select v-model="ruleForm.first_cateid" @change="firstListChange">
            <el-option :value="0" label="请选择"></el-option>
            <el-option
              v-for="item in firstList"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 二级分类 -->
        <el-form-item label="二级分类" prop="second_cateid">
          <el-select
            v-model="ruleForm.second_cateid"
            @change="secondListChange"
          >
            <el-option :value="0" label="请选择"></el-option>
            <el-option
              v-for="item in secondList"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择商品" prop="goodsid">
          <el-select v-model="ruleForm.goodsid">
            <el-option :value="0" label="请选择"></el-option>
            <el-option
              v-for="item in thirdList"
              :key="item.id"
              :label="item.goodsname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 结束 -->
      </el-form>

      <el-button
        v-if="info.type === 'add'"
        type="success"
        @click="submitForm('ruleForm')"
        >立即创建</el-button
      >
      <el-button v-else type="primary" @click="submitForm('ruleForm')"
        >立即修改</el-button
      >
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {
  cateList,
  getInfoByPid,
  getGoodsListInfo,
  seckAdd,
  seckEdit,
  goodsDelete,
} from "../../api.js";
export default {
  data() {
    return {
      // 时间的值
      value: [""],
      // 一级分类的下拉菜单
      firstList: [],
      // 二级分类的下拉菜单
      secondList: [],
      // 商品下拉菜单
      thirdList: [],
      ruleForm: {
        title: "",
        begintime: 0,
        endtime: 0,
        first_cateid: 0,
        second_cateid: 0,
        // giidsid: 0,
        goodsid: 0,
        status: 1,
      },
    };
  },
  props: ["info"],
  created() {
    // 1.1 获取一级分类
    this.getFirstList();
  },
  methods: {
    // 01.2获取一级分类
    async getFirstList() {
      let res = await cateList();
      this.firstList = res.list;
    },
    // 4 获取选择时间
    timeChange(val) {
      this.ruleForm.begintime = String(val[0]);
      this.ruleForm.endtime = String(val[1]);
    },
    // 1.4 监听一级分类每次发生改变同时改变二级分类内容
    async firstListChange() {
      // 1.5 每次选择一级菜单时都把二级菜单的值变成默认的
      this.ruleForm.second_cateid = 0;
      if (this.ruleForm.first_cateid != 0) {
        let res = await getInfoByPid(this.ruleForm.first_cateid);
        // 02.3 将返回的值给第二个下拉列表，遍历出来相应的值
        this.secondList = res.list;
      } else {
        this.secondList = [];
        this.ruleForm.secondList = 0;
        this.thirdList = [];
        this.ruleForm.giidsid = 0;
      }
    },
    // 02.监听2级分类每次发生改变,生成新的商品
    async secondListChange() {
      // 1.5 每次选择一级菜单时都把二级菜单的值变成默认的

      if (this.ruleForm.second_cateid != 0) {
        let res = await getGoodsListInfo({
          fid: this.ruleForm.first_cateid,
          sid: this.ruleForm.second_cateid,
        });
        this.thirdList = res.list;
        // console.log(this.thirdList);
      } else {
        this.thirdList = [];
        // this.ruleForm.giidsid = 0;
      }
    },

    // 给表单赋值
    setValue(info) {
      this.value = [""];
      // 浅拷贝，数据会互相影响
      // 深拷贝，避免数据互相影响
      /* 把对象中的值结构给另一个新对象再赋值 */
      this.ruleForm = { ...info };

      if (this.info.type === "edit") {
        // 设置活动的时间
        this.value = [
          new Date(Number(info.begintime)),
          new Date(Number(info.endtime)),
        ];
        this.algin();
      }
    },
    async algin() {
      let res = await getInfoByPid(this.ruleForm.first_cateid);
      // 02.3 将返回的值给第二个下拉列表，遍历出来相应的值
      this.secondList = res.list;
      let arr = await getGoodsListInfo({
        fid: this.ruleForm.first_cateid,
        sid: this.ruleForm.second_cateid,
      });
      console.log(arr);
      this.thirdList = arr.list;
    },
    submitForm(formName) {
      /* 提交验证，所有点击的不同功能都在这里验证*/
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          /* 请求分支 */
          if (this.info.type === "add") {
            // console.log(this.ruleForm, "info");
            let res = await seckAdd(this.ruleForm);
          } else {
            // 立即编辑分支
            // return;
            this.ruleForm.giidsid = this.ruleForm.goodsid;
            delete this.ruleForm.goodsid;
            console.log(this.ruleForm);
            // return;
            let res = await seckEdit(this.ruleForm);
          }
          /*  通知list更新 并 渲染数据 */
          this.$emit("updata");
        } else {
          // 点击警告分支
          console.log("error submit!!");
          return false;
        }
      });
      /*  不管点击那个按钮这个弹窗都应该消失 */
      this.info.isshow = false;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
</style>